<template>
  <div class="type">
    <el-card>
      <div class="type-search">
        <el-form ref="form" :inline="true" label-width="130px" :model="form">
          <el-form-item label="类型名称：">
            <el-input v-model="form.TYPE_NAME" />
          </el-form-item>
          <el-form-item label="类型编号：">
            <el-input v-model="form.TYPE_ID" />
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="primary" @click="addType">新增类型</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="type-content">
        <div class="type-content-tree">
          <el-tree :data="data" default-expand-all :expand-on-click-node="false" node-key="TYPE_ID" @node-click="handleNodeClick">
            <template #default="{ node }" class="custom-tree-node">
              <span>{{ node.data.label }}</span>
              <span>
                <el-button size="mini" type="text" @click="() => addChild(node, data)">新增子类型</el-button>
              </span>
            </template>
          </el-tree>
        </div>
        <div class="type-content-table">
          <el-table
            border
            :data="tableData"
            highlight-current-row
            lazy
            row-key="id"
            style="width: 85%"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column label="类型名称" prop="label" width="130" />
            <el-table-column label="类型编号" prop="value" width="100" />
            <el-table-column label="创建人员" prop="ADDWHO" />
            <el-table-column label="创建时间" prop="ADDTIME" />
            <el-table-column label="编辑人员" prop="EDITWHO" />
            <el-table-column label="编辑时间" prop="EDITTIME" />
            <el-table-column fixed="right" label="操作" width="100">
              <template #default="{ row }">
                <el-button type="text" @click="editor(row)">编辑</el-button>
                <el-button type="text" @click="dele(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>

    <el-dialog v-model="addVisible" :title="title" width="50%">
      <type-dialog v-if="addVisible" :child-data="childData" @success="success" />
    </el-dialog>
    <el-dialog v-model="editorVisible" :title="title" width="50%">
      <type-dialog v-if="editorVisible" :type-obj="typeObj" @success="success" />
    </el-dialog>
  </div>
</template>
<script>
  import TypeDialog from '../../components/TypeDialog.vue'
  import requestMethod from '../../common/requestMethod'
  import publicFn from '../../common/requestCommon'
  export default {
    name: 'Type',
    components: {
      TypeDialog,
    },
    data() {
      return {
        form: {},
        typeObj: {},
        addVisible: false,
        editorVisible: false,
        title: '新增类型',
        data: [],
        tableData: [],
        allData: [],
        srcArr: [],
        childData: {},
        count: 0,
      }
    },
    created() {
      this.getTypeList()
    },
    // activated() {
    //   this.list = []
    //   this.form = {}
    // },
    methods: {
      editor(row) {
        this.typeObj = row
        this.editorVisible = true
        this.title = '编辑类型'
      },
      reset() {
        this.form = {}
        this.getTypeList()
      },
      dele(row) {
        console.log(row)
        this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            let res = await publicFn(requestMethod.TYPE_DELETE, { TYPE_ID: row.TYPE_ID })
            console.log(res)
            if (res.code === '00000') {
              this.getTypeList('删除')
            } else {
              this.$message({
                type: 'info',
                message: res.msg,
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
      },
      getTreeName(list, id) {
        let _this = this
        for (let i = 0; i < list.length; i++) {
          let a = list[i]
          if (a.TYPE_ID === id) {
            return a
          } else {
            if (a.children && a.children.length > 0) {
              let res = _this.getTreeName(a.children, id)
              if (res) {
                return res
              }
            }
          }
        }
      },
      success() {
        this.addVisible = false
        this.editorVisible = false
        this.getTypeList()
      },
      handleNodeClick(data) {
        this.tableData = this.getTreeName(this.data, data.TYPE_ID).children
      },
      async getTypeList(type) {
        let res = await publicFn(requestMethod.TYPE_LIST, { ...this.form, '#LIMIT#': 1, '#PAGE_SIZE#': 99999 })
        if (res.code === '00000') {
          if (res.data[requestMethod.TYPE_LIST].data.length > 0) {
            this.srcArr = res.data[requestMethod.TYPE_LIST].data
            if (this.count == 0) {
              this.tableData = []
              this.data = []
              res.data[requestMethod.TYPE_LIST].data.forEach((item) => {
                if (item.PARAENT_TYPE_ID == 0) {
                  this.tableData.push({
                    parentId: item.PARAENT_TYPE_ID,
                    value: item.TYPE_ID,
                    label: item.TYPE_NAME,
                    ...item,
                    children: [],
                  })
                }
              })
              this.tableData.forEach((it) => {
                it.children = this.getChildren(it.value, this.srcArr)
              })
              this.data = this.tableData
            } else {
              this.tableData = []
              this.srcArr.forEach((item) => {
                this.tableData.push({
                  parentId: item.PARAENT_TYPE_ID,
                  value: item.TYPE_ID,
                  label: item.TYPE_NAME,
                  ...item,
                  children: [],
                })
              })
            }
          } else {
            if (type) {
              this.tableData = []
              this.data = []
            } else {
              this.tableData = []
            }
          }
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      // 处理级联--递归
      getChildren(tId, srcArr) {
        let children = []
        srcArr.forEach((item) => {
          if (item.PARAENT_TYPE_ID == tId) {
            children.push({
              parentId: item.PARAENT_TYPE_ID,
              value: item.TYPE_ID,
              label: item.TYPE_NAME,
              ...item,
              children: [],
            })
          }
        })
        if (children.length == 0) {
          return null
        }
        children.forEach((item) => {
          item.children = this.getChildren(item.value, this.srcArr)
        })
        return children
      },
      query() {
        this.getTypeList()
        this.count++
      },
      addType() {
        this.addVisible = true
        this.childData = {}
        this.title = '新建类型'
      },
      addChild(node) {
        this.addVisible = true
        this.title = '新建类型'
        this.childData = node.data
      },
    },
  }
</script>
<style lang="scss" scoped>
  .type {
    padding: 15px;
    box-sizing: border-box;
    .type-content {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      padding-left: 15px;
      box-sizing: border-box;
      .type-content-table {
        // min-width: 700px;
        flex-grow: 0.6;
        display: flex;
        flex-direction: row-reverse;
      }
      .type-content-tree {
        flex-grow: 0.4;
      }
    }
  }
</style>
